<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
  <!-- <link rel="stylesheet" href="stylesheets/reset.css"> -->
  <link rel="stylesheet" href="stylesheets/index.css">
</head>
<body>

<div id="app">
	<h1>{{ msg }}</h1>
	<hr>
	<div v-for="row of 9">
		<template v-for="col of row">
			<button>{{ row }} x {{ col }}</button>
			<span>=</span>
			<button>结果</button>
		</template>
	</div>
	<hr>
	<!-- [] {} [key1, key2] -->
	<!-- <h2 v-for="(value, key, index) of obj"> -->
	<h2 v-for="(value, key, index) in obj">
		{{ key }}: {{ value }} - {{ index }}
	</h2>
	<hr>
	<!-- <ul v-for="i of 10"> -->
	<!-- <ul v-for="i of 'abcdefghijk'"> -->
	<ul>
		<!-- diff 算法 node -->
		<!-- for(let item in items) {} -->
		<!-- <li v-for="item in items"> -->
		<!-- <li v-for="(item, index) in items"> -->
		<template v-for="(item, index) of items">
			<li :key="index">
				{{ index + 1 }}
			</li>
			<li :key="item.message">
				{{ item }}
			</li>
			<li :key="(index + 1) * 10 + 1">
				{{ msg }}
			</li>
		</template>
	</ul>
	<h3 v-for="num of evenNumbers">{{ num }}</h3>
	<button @click="items.shift()">shift</button>
</div>

<script src="./vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
